<template>
  <el-row :gutter="22" style="margin: 0 20px">
    <el-col :span="6">
      <el-card shadow="always">
        <div class="thecenterbody">
          <div>
            <h6 style="color: #53a8ff">{{ UserDate.name }}</h6>
            <span class="text">欢迎您</span>
          </div>
          <div class="headicon" style="color: #53a8ff">
            <el-icon><UserFilled /></el-icon>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always"
        ><div class="thecenterbody">
          <div>
            <h6 style="color: #42b983">{{ weekday }}</h6>
            <span class="text"> {{ dateFormat(new Date()) }}</span>
          </div>
          <div class="headicon" style="color: #42b983">
            <el-icon><Shop /></el-icon>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always">
        <div class="thecenterbody">
          <div>
            <h6 style="color: #f08080">{{ userCount }}</h6>
            <span class="text"> 用户总数</span>
          </div>
          <div class="headicon" style="color: #f08080">
            <el-icon><Avatar /></el-icon>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always">
        <div class="thecenterbody">
          <div>
            <h6 style="color: #42b983">{{ jabCount }}</h6>
            <span class="text">接种总数</span>
          </div>
          <div class="headicon" style="color: #42b983">
            <el-icon><SuccessFilled /></el-icon>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-card shadow="always" class="card" id="chartPie"></el-card>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Homee",
  data() {
    return {
      charts: "",
      weekday: "",
      UserDate: {},
      localinfo: "",
      userCount: 0,
      jabCount: 0,
      resCount: 0,
      noticeCount: 0,
      forumCount: 0,
      commentCount: 0,
      pieData: [],
    };
  },
  methods: {
    getuserCount() {
      //获取用户总数
      this.$http
        .get("/inoculations/user/pageall", {
          params: {
            pageNum: 5,
            pageSize: 1,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.userCount = res.data.total;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    getjabCount() {
      //获取接种总数
      this.$http
        .get("/inoculations/inoculation/pageall", {
          params: {
            pageNum: 5,
            pageSize: 1,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.jabCount = res.data.total;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    getreserCount() {
      //获取预约总数
      this.$http
        .get("/inoculations/inoculation/pageall", {
          params: {
            pageNum: 5,
            pageSize: 1,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.resCount = res.data.total;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    getnoticeCount() {
      //获取公告总数
      this.$http
        .get("/inoculations/notice/pageall", {
          params: {
            pageNum: 5,
            pageSize: 1,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.noticeCount = res.data.total;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    getforumCount() {
      //获取论坛总数
      this.$http
        .get("/inoculations/forum/pageall", {
          params: {
            pageNum: 5,
            pageSize: 1,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.forumCount = res.data.total;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    getcommentCount() {
      //获取评论总数
      this.$http
        .get("/inoculations/forumcomment/pageall", {
          params: {
            pageNum: 5,
            pageSize: 1,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.commentCount = res.data.total;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    getuserDate() {
      //获取当前用户信息
      let token = localStorage.getItem("token");
      console.log(token);
      this.$http.post("/inoculations/admin/getTokenId", token).then((res) => {
        if (res.statusCode == "200") {
          this.UserDate = res.data;
          console.log(res.data);
        }
      }).catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },

    dateFormat() {
      //时间处理
      var date = new Date();
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.weekday = weekArr[week];
      return year + "/" + month + "/" + day;
    },
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById("chartPie"));
      this.chartPie.setOption({
        title: {
          text: "数据库数据折线图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["当前数量"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["用户数量", "接种数量", "预约数量", "公告数量", "论坛数量", "评论数量"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "当前数量",
            type: "line",
            // smooth: true,
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [this.userCount, this.jabCount,this.resCount, this.noticeCount, this.forumCount, this.commentCount],
          }
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },
  created() {
    this.getuserDate();
    this.getuserCount();
    this.getjabCount();
    this.getreserCount();
    this.getnoticeCount();
    this.getforumCount();
    this.getcommentCount();
  },
  mounted: function () {
    // this.drawCharts();
    //如果数据同时调用时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
    setTimeout(() => {
      this.drawCharts();
    }, 500);
  },
};
</script>

<style scoped>
.text {
  color: #2f4f4f;
  font-size: 16px;
}
h6 {
  padding: 10px 0;
  font-size: 22px;
}
.thecenterbody {
  display: flex;
  justify-content: space-between;
}
.headicon {
  font-size: 58px;
  margin-right: 10px;
}
.card {
  height: 500px;
  width: 94%;
  margin: auto;
  margin-top: 30px;
}
</style>
